<template>
    <div class="SHZY-common-layout bg-color" :key="domKey">
        <div class=" SHZY-common-layout-center" style="overflow-y: auto;">
            <div style="overflow-x: hidden;overflow-y: auto;">
                <div class="flex  h-full w-full" style="overflow-y: auto;" ref="main">
                    <div class="flex-col item-width mx-10 bg-gray p-10" ref="undistributed">
                        <div class="flex  my-10 align-center">
                            <el-avatar :size="50" :src="define.comUrl + '/api/File/Image/userAvatar/001.png'"
                                class="avatar" />&nbsp;
                            <span>未分配</span>&nbsp;&nbsp;
                            <!-- <span class="circle bg-blue">{{ undistributed.length }}</span> -->
                            <el-tag size="medium">{{ undistributed.length }}</el-tag>
                        </div>
                        <div :class="handleClass(item)" v-for="(item, index) in undistributed" :key="index">
                            <!-- <div class="flex justify-between mb-5 align-center">
                                <span class="font-color-blue ">{{ item.Code }}</span>
                                <span class="circle bg-blue">{{ item.IncomingQty }}</span>
                            </div> -->
                            <el-form label-width="85px" label-position="left">
                                <el-form-item label="报检单号：">
                                    <span class="item-label"> {{ item.code }}</span>
                                </el-form-item>
                                <el-form-item label="物料：">
                                    <el-tooltip effect="dark" :content="item.materialDes + ' ' + item.materialCode"
                                        placement="top">
                                        <span class="item-label"> {{ handleContent(item.materialDes + " " +
                                            item.materialCode)
                                        }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="来料数量：">
                                    <span class="item-label"> {{ item.incomingQty }}</span>
                                </el-form-item>
                                <el-form-item label="报检日期：">
                                    <span class="item-label"> {{ shzy.toDate(item.date, "yyyy-MM-dd HH:mm:ss") }} </span>
                                </el-form-item>
                                <el-form-item label="供应商：">
                                    <el-tooltip effect="dark" :content="item.supplierDes + ' ' + item.supplierCode"
                                        placement="top">
                                        <span class="item-label"> {{ handleContent(item.supplierDes + " " +
                                            item.supplierCode)
                                        }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="批次号：">
                                    <span class="item-label"> {{ item.batchNumber }}</span>
                                </el-form-item>
                            </el-form>
                            <!-- <div class="flex justify-between  item-row">
                                <span class="item-label">报检单号</span>
                                <span class="item-label"> {{ item.code }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">物料</span>
                                <span class="item-label"> {{ item.materialCode + " " + item.materialDes }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">来料数量</span>
                                <span class="item-label"> {{ item.incomingQty }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">报检日期</span>
                                <span class="item-label"> {{ shzy.toDate(item.date, "yyyy-MM-dd HH:mm:ss") }} </span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">供应商</span>
                                <span class="item-label"> {{ item.supplier + " " + item.supplierDes }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">批次号</span>
                                <span class="item-label"> {{ item.batchNumber }}</span>
                            </div> -->
                            <div class="item-row" style="float:right;">
                                <!-- <el-button type="primary" @click=" addInspector(item.Id)" size="mini"
                                    style="width:100px;margin:0 0 5px 0px;">
                                    添加检验员
                                </el-button> -->
                                <el-tag style="cursor:pointer;" size="medium" @click=" addInspector(item.id)">分配检验员</el-tag>
                                <!-- <el-tooltip effect="dark" content="添加检验员" placement="top">
                                    <el-link icon="icon-ym icon-ym-user" :underline="false"
                                        @click=" addInspector(item.Id)" />
                                </el-tooltip> -->
                            </div>
                        </div>
                    </div>

                    <div class="item-width mx-10 flex-col bg-gray p-10 " v-for="(item, index) in allocated"
                        :ref="'demo' + index" :key="index" :class="'module-' + index">
                        <div class="flex  my-10 align-center">
                            <el-avatar :size="50" :src="define.comUrl + '/api/File/Image/userAvatar/' + item.headIcon"
                                class="avatar" />&nbsp;
                            <span>{{ item.employeeName }}/{{ item.employeeCode }} </span>&nbsp;&nbsp;
                            <!-- <span class="circle bg-blue">{{ item.count }}</span> -->
                            <el-tag size="medium">{{ item.count }}</el-tag>
                        </div>
                        <!-- border-l border-blue -->
                        <div :class="handleClass(item2)" v-for="(item2, index2) in item.list" :key="item2.id">
                            <!-- <div class="flex justify-between mb-5 align-center">
                                <span class="font-color-blue ">{{ item2.Code }}</span>
                                <span class="circle bg-blue">{{ item2.IncomingQty }}</span>
                            </div> -->

                            <el-form label-width="85px" label-position="left">
                                <el-form-item :label="item2.type == 1 ? '报检单号：' : '检验批号：'">
                                    <span class="item-label"> {{ item2.code }}</span>
                                </el-form-item>
                                <el-form-item label="物料：">
                                    <el-tooltip effect="dark" :content="item2.materialDes + ' ' + item2.materialCode"
                                        placement="top">
                                        <span class="item-label"> {{ handleContent(item2.materialDes + " " +
                                            item2.materialCode)
                                        }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="来料数量：">
                                    <span class="item-label"> {{ item2.incomingQty }}</span>
                                </el-form-item>
                                <el-form-item :label="item2.type == 1 ? '报检日期：' : '检验日期：'">
                                    <span class="item-label"> {{ shzy.toDate(item2.date, "yyyy-MM-dd HH:mm:ss") }} </span>
                                </el-form-item>
                                <el-form-item label="供应商：">
                                    <el-tooltip effect="dark" :content="item2.supplierDes + ' ' + item2.supplierCode"
                                        placement="top">
                                        <span class="item-label"> {{ handleContent(item2.supplierDes + " " +
                                            item2.supplierCode)
                                        }}</span>
                                    </el-tooltip>
                                </el-form-item>
                                <el-form-item label="批次号：">
                                    <span class="item-label"> {{ item2.batchNumber }}</span>
                                </el-form-item>
                            </el-form>
                            <!-- <div class="flex justify-between  item-row">
                                <span class="item-label">报检单号</span>
                                <span class="item-label"> {{ item2.code }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">物料</span>
                                <span class="item-label"> {{ item2.materialCode + " " + item2.materialDes }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">来料数量</span>
                                <span class="item-label"> {{ item2.incomingQty }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">报检日期</span>
                                <span class="item-label"> {{ shzy.toDate(item2.date, "yyyy-MM-dd HH:mm:ss") }} </span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">供应商</span>
                                <span class="item-label"> {{ item2.supplier + " " + item2.supplierDes }}</span>
                            </div>
                            <div class="flex justify-between  item-row">
                                <span class="item-label">批次号</span>
                                <span class="item-label"> {{ item2.batchNumber }}</span>
                            </div> -->

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <SHZY-Dialog dialogTitle="分配检验员" appenToBody :visible.sync="dialogShow" @affirm="affirm" emitEvent="affirm">
            <el-form ref="inspectorForm" :model="inspector">
                <el-form-item prop="employeeCode" :rules="[{ required: true, message: '选择人员' }]">
                    <SHZY-select :list="inspectorOptions" isConcat concatSymbol=" / "
                        v-model:bindValue="inspector.employeeCode" label="fullName" value="enCode"></SHZY-select>
                </el-form-item>

            </el-form>
        </SHZY-Dialog>
    </div>
</template>

<script>
import Sortable from 'sortablejs'
import { InspectorKanban, AssignInspector } from '@/api/q1/business/board'
import restAPI from "@/api/q1/basedata/masterCheckDist"
import SHZYDialog from './diaLog'
export default {
    components: { SHZYDialog },
    data() {
        return {
            undistributed: [],
            allocated: [],
            dialogShow: false,
            inspector: {
                employeeCode: null
            },
            selectId: '',
            inspectorOptions: [],
            domKey: true
        }
    },
    created() {
        this.getInspectorKanban()
        this.getTreeView()
    },
    mounted() {
    },
    methods: {
        handleClass(item) {
            if (item.overdue == 2) {
                return 'bg-white border-left-red p-15 my-5 radius-10'
            } else if (item.overdue == 1) {
                return 'bg-white border-left-yellow p-15 my-5 radius-10'
            } else {
                return 'bg-white border-left-green p-15 my-5 radius-10'
            }

        },
        handleContent(content) {
            if (content.length > 20) {
                return content.substr(0, 20) + "..."
            } else {
                return content
            }
        },
        addInspector(id) {
            this.dialogShow = true
            this.selectId = id
        },
        affirm() {
            this.$refs.inspectorForm.validate(async (valid) => {
                if (valid) {
                    const employee = this.inspectorOptions.find(item => {
                        return item.enCode == this.inspector.employeeCode
                    })
                    const flag = await this.updateAssignInspector(this.selectId, employee.fullName, this.inspector.employeeCode, 1)
                    if (flag) {
                        this.dialogShow = false
                        this.selectId = ''
                        this.inspector = { employeeCode: '' }
                        // this.getInspectorKanban()

                    }

                }
            })

        },
        getInspectorKanban() {
            InspectorKanban().then(res => {
                this.undistributed = res.data.wait
                this.allocated = res.data.list
                this.$nextTick(() => {
                    this.initSortable()
                })
            })
        },
        updateAssignInspector(id, employeeName, employeeCode, type) {
            return new Promise(resolve => {
                AssignInspector({
                    id, employeeName, employeeCode, type
                }).then(res => {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                    })
                    resolve(true)
                    this.getInspectorKanban()

                }).catch(e => {
                    this.getInspectorKanban()
                    this.getTreeView()
                })
            })


        },
        renderDom() {
            console.log(1111)
            this.domKey = !this.domKey
        },
        initSortable() {
            const _this = this
            for (const index in this.allocated) {
                const ref = this.$refs['demo' + index]
                new Sortable(ref[0], {
                    group: 'shared',
                    animation: 150,
                    draggable: '.bg-white',
                    forceFallback: true,
                    scrollSensitivity: 200,
                    scrollSpeed: 15,
                    bubbleScroll: true,
                    sort: false,
                    disabled: true,
                    onEnd: (evt) => {
                        if (evt.to == evt.from) {
                            return false;
                        }
                        const index = evt.oldIndex - 1
                        const newIndex = evt.newIndex - 1;
                        const elForm = evt.from
                        const classArrForm = elForm.className.split(' ')
                        const arrIndexForm = Number(classArrForm[classArrForm.length - 1].split('-')[1])
                        const elTo = evt.to
                        const classArrTo = elTo.className.split(' ')
                        const arrIndexTo = Number(classArrTo[classArrTo.length - 1].split('-')[1])

                        const id = _this.allocated[arrIndexForm].list[index].id;
                        const type = _this.allocated[arrIndexForm].list[index].type;
                        let employeeName = _this.allocated[arrIndexTo].employeeName;
                        let employeeCode = _this.allocated[arrIndexTo].employeeCode;

                        // const targetRow = _this.allocated[arrIndexForm].list[index]
                        // _this.allocated[arrIndexTo].list.splice(newIndex, 0, targetRow);
                        // _this.allocated[arrIndexForm].list.splice(index, 1);

                        // this.$set(_this.allocated[arrIndexTo], 'count', _this.allocated[arrIndexTo].count + 1);
                        // this.$set(_this.allocated[arrIndexForm], 'count', _this.allocated[arrIndexForm].count - 1);
                        _this.updateAssignInspector(id, employeeName, employeeCode, type)
                        this.$nextTick(() => {
                            this.renderDom()
                        })
                    },
                    onMove: (evt) => {
                        // if (evt.to == evt.from) {
                        //     return false
                        // } else {
                        //     return true
                        // }
                    }
                });
            }
            new Sortable(this.$refs.undistributed, {
                group: {
                    name: 'shared',
                    put: false // 不允许拖拽进这个列表
                },
                animation: 150,
                draggable: '.bg-white',
                forceFallback: true,
                scrollSensitivity: 200,
                scrollSpeed: 15,
                bubbleScroll: true,
                sort: false,
                onEnd: (evt) => {
                    if (evt.to == evt.from) {
                        return false;
                    }
                    const el = evt.to
                    const index = evt.oldIndex - 1
                    const id = _this.undistributed[index].id
                    const type = _this.undistributed[index].type
                    let employeeName, employeeCode;
                    for (const index in _this.allocated) {
                        if (el === this.$refs['demo' + index][0]) {
                            employeeName = _this.allocated[index].employeeName;
                            employeeCode = _this.allocated[index].employeeCode
                            this.$set(_this.allocated[index], 'count', _this.allocated[index].count + 1)
                            delete _this.undistributed[index]
                            break;
                        }
                    }
                    _this.updateAssignInspector(id, employeeName, employeeCode, type)
                },
                onMove: (evt) => {
                    console.log(evt)
                    // if (evt.to == evt.from) {
                    //     return false;
                    // } else {
                    //     return true
                    // }
                }
            });

        },


        getTreeView() {
            restAPI.getInspectors().then(res => {
                this.inspectorOptions = res.data
            }).catch(ex => {
                this.$message.console.error("获取检验员列表失败！");
            });
        },





    }
}


</script>


<style scoped lang="scss">
.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between
}

.flex-1 {
    flex: 1
}

.bg-white {
    background-color: white;

    .el-form-item {
        margin-bottom: 0px;
    }
}

.border-left-red {
    border-left: 5px solid #ff625c;
}

.border-left-yellow {
    border-left: 5px solid #f9a646;
}

.border-left-green {
    border-left: 5px solid #6dcc51;
}

.border-l {
    border-left: 8px solid;
}

.mx-10 {
    margin: 0px 10px;
}

.bg-gray {
    // background-color: #F0F0F0;
}

.p-10 {
    padding: 10px;
}

.my-10 {
    margin: 10px 0px;
}

.circle {
    border-radius: 50%;
    color: white;
    padding: 5px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-blue {
    background-color: #2DB7F5;
}

.font-color-blue {
    color: #31A8F8;
    font-weight: 600;
}

.border-blue {
    border-color: #2DB7F5;
}

.my-5 {
    margin: 5px 0px;
}

.mb-5 {
    margin-bottom: 5px;
}

.icon-size {
    font-size: 50px;
}

.bg-green {
    background-color: #6ABE39;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute
}

.absolute-site {
    right: 10px;
    top: 10px
}

.px-10 {
    padding: 10px 0px;
}

.p-15 {
    padding: 15px 15px 5px 15px;
}


.h-full {
    height: 100%;
}

.mr-10 {
    margin-right: 10px;

}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-around {
    justify-content: space-around;
}

.h-full {
    height: 100%;
}

.item-width {
    min-width: 400px;
    max-width: 400px;
    // flex: 1;
}

.SHZY-common-layout-center {
    overflow-x: hidden;
}

.SHZY-common-layout {
    overflow-x: hidden;
}

::v-deep .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}

.w-full {
    width: 100%;
}

.radius-10 {
    border-radius: 10px;

}

.item-label {
    color: #757575;
    font-weight: 500;
}

.item-row {
    margin-top: 5px;
}
</style>